<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Pipilia - Landing Page</title>
	
	<!-- HTML 5 for older browsers -->
	<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Google Webfonts -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800" rel="stylesheet" type="text/css" />
	
	<!-- Stylesheets -->
	<link href="css/reset.css" rel="stylesheet" />
	<link href="css/main.css" rel="stylesheet" />
	<link href="css/asyncslider_body.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	
	<!-- JavaScripts -->
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.asyncslider.min.js"></script>
	<script src="js/hover.zoom.js"></script>
	<script src="js/jquery.flip.min.js"></script>
	<script src="js/main.js"></script>	
	<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
<!-- Shared on MafiaShare.net  --><!-- Shared on MafiaShare.net  --></head>
<body>
	<div class="background_overlay">
		<div class="background">
		
			<!--Wrapper -->
			<div class="wrapper">
			
				<!--Header -->
				<header>
					<a href="#" class="logo">
					Pipilia
					</a>
					<div class="description">Just another mobile app!</div>
					
					<div class="contact">
					
						<!-- Order -->
						<a class="order" href="#">Order Now</a>
						<!-- END OF: Order -->
						
						<!-- Telephone -->
						<div class="telephone">+1 234 33 22</div>
						<!-- END OF: Telephone -->
						
						<a class="social" href="#">f</a>
						<a class="social" href="#">t</a>
						
					</div>
					<div class="clear"></div>
				</header>
				<!-- END OF: Header -->
				
				<div class="line"></div>
				<div class="clear"></div>
			</div>
			
			<!-- END OF: Wrapper -->
			<div class="slider_container">
			
				<ul class="async_slider">
					
					<!-- Slide Item 1 -->
					<li id="slide-01">
						<div class="slider_text">
							<h1>Available on ThemeForest</h1>
							<p>Hello ThemeForest users, this application is avaliable only for mobile devices,  this application is only avaliable on these marketplaces: </p>
							<a class="button" href="#">Android</a> 
							<div class="or">or</div>
							<a class="button" href="#">AppStore</a>
						</div>
						<div class="slider_image">
							<img src="images/mac2.png" width="420" height="250" />
						</div>
						<div class="clear"></div>
					</li>
					<!-- End of: Slide Item 1 -->
					
					<!-- Slide Item 1 -->
					<li id="slide-02">
						<div class="slider_text">
							<h1>Browser Compatible</h1>
							<p>Pipilia theme is built to work on the most known internet browsers.</p>
							<p>Try out the theme in any browser, but the best performance is on Google Chrome.</p>
							<p>Check this out!</p>
						</div>
						<div class="slider_image browsers">
							<div> <img src="images/op.png" width="48" height="54" /></div>
							<div> <img src="images/firefox.png" width="87" height="86" /></div>
							<div> <img src="images/chrome.png" width="128" height="126" /></div>
							<div> <img src="images/safari.png" width="78" height="82" /></div>
							<div> <img src="images/ie.png" width="53" height="54" /></div>
						</div>
						<div class="clear"></div>
					</li>
					<!-- End of: Slide Item 1 -->
					
					
					<!-- Slide Item 1 -->
					<li id="slide-03">
						<div class="slider_text">
							<h1>Win a MacBook Pro</h1>
							<p>Be a part of the design contest and get into the competition to win an Apple MacBook Pro.
								<br />
								The winner will be announced on Thursday the 16th of October.
							</p>
							<a class="button" href="#">Join the competition</a> 
							<div class="or">or</div>
							<a class="button" href="#">Watch the participants</a>
						</div>
						<div class="slider_image">
							<img src="images/mac.png" width="420" height="250" />
						</div>
						<div class="clear"></div>
					</li>
					<!-- End of: Slide Item 1 -->
					
				</ul>
				
				<div class="sliderNav"></div>
				<div class="slides_nav_container"></div>
				
			</div>
			<!-- END OF: Slider Container -->
			
			<!--WRAPPER -->
			<div class="wrapper">
			
				<section>
					<div class="content">
                    
                    	<div class="column">
                            <h1>Innovative</h1>
                            <img src="images/ideas.jpg" />
                            <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit.
                             These men promptly escaped from a maximum security stockade to the Los Angeles underground.
                            </p>
                        </div>
                        
                    	<div class="column">
                            <h1>Interactive</h1>
                            <img src="images/interactive.jpg" />
                            <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
                        </div>
                        
                    	<div class="column">
                            <h1>e-Shopping</h1>
                            <img src="images/shop.jpg" />
                            <p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer, and above it there hung a picture that he had recently.</p>
                        </div>
                    	<div class="clear"></div>
                    </div>
                    
					<ul class="features">
                            <li class="feature">
                                <a href="#">
                                <div class="networking ca-icon"></div>
                                <div class="ca-content">
                                    <h1 class="ca-main">Networking</h1>
                                    <p class="ca-sub">
                                        Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in rouble with the team.
                                    </p>
                                </div>	
                                <div class="clear"></div>
                                </a>
                            </li><!-- end of: FEATURE  -->
                       
    
                            <li class="feature">
                                <a href="#">
                                <div class="applications ca-icon"></div>
                                <div class="ca-content">
                                    <h1 class="ca-main">Applications</h1>
                                    <p class="ca-sub">
                                        Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye.
                                    </p>
                                </div>
                                <div class="clear"></div>
                                </a>
                            </li><!-- end of: FEATURE  -->
                            
    
                            <li class="feature">
                                <a href="#">
                                <div class="retina ca-icon"></div>
                                <div class="ca-content">
                                    <h1 class="ca-main">Retina Display</h1>
                                    <p class="ca-sub">
                                        Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. 
                                    </p>
                                </div>
                                <div class="clear"></div>
                                </a>
                            </li><!-- end of: FEATURE  -->
                            
        
                            
                            <li class="feature">
                                <a href="#">
                                <div class="gaming ca-icon"></div>
                                <div class="ca-content">
                                    <h1 class="ca-main">Gaming</h1>
                                    <p class="ca-sub">
                                        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius.
                                    </p>
                                </div>   
                                <div class="clear"></div>
                                </a>
                            </li><!-- end of: FEATURE  -->
    
                            
                        <div class="clear"></div>
                       
                    </ul><!--end of Features -->
					
					<div class="gallery">
						<h1>Gallery</h1>
						
						<a class="fancybox" rel="group" href="http://creattica.com/uploaded-images/0018/8126/01_woody.__large_preview.png?1">
							<img src="images/image_1.jpg" width="120" height="60" />
						</a>
						<a class="fancybox" rel="group" href="http://creattica.com/uploaded-images/0019/3672/Elkins_Dental.png">
							<img src="images/image_2.jpg" width="120" height="60" />
						</a>
						<a class="fancybox" rel="group" href="http://creattica.com/uploaded-images/0018/8207/Rhino.jpg">
							<img src="images/image_3.jpg" width="120" height="60" />
						</a>
						<a class="fancybox" rel="group" href="http://creattica.com/uploaded-images/0018/8132/localever.png">
							<img src="images/image_4.jpg" width="120" height="60" />
						</a>
						<a class="fancybox" rel="group" href="http://creattica.com/uploaded-images/0018/8573/qlosd.jpg">
							<img src="images/image_5.jpg" width="120" height="60" />
						</a>
						<a class="fancybox" rel="group" href="http://creattica.com/uploaded-images/0018/7250/1880_big.jpg">
							<img src="images/image_6.jpg" width="120" height="60" />
						</a>
						
						<div class="clear"></div>
					</div>
					
				</section>
				
				<div class="blocks">
				
					<div class="blocks_inner">
					
						<div class="block_1">
							<h1>Uniqueness</h1>
							<p>
								This landing page theme has a unique clean design, you can use it for multiple purposes. 
							</p>
						</div>
						
						<div class="block_2">
							<h1>Customizable</h1>
							<p>
								Pipilia is an easy-customizable theme, it is built on different colour schemes, for more read the documentation. 
							</p>
						</div>
						
						<div class="block_3">
							<h1>24/7 Support</h1>
							<p>
								Got stuck on something? Write or call us, we have our support team online 24 hours a day. 
							</p>
						</div>
						
						<div class="clear"></div>
					</div>
					
				</div>
				
				<div class="first_column" id="subscribe_box">
				
					<div class="column_content">
						<h1>Subscribe</h1>
						<p>
							Do you want to get in touch with us? Enter your email below to receive all the news about us and our monthly newsletter:
						</p>
					</div>
					
					<div class="bottom_content">
						<form action="#" method="post" id="subscribe_form">
							<input type="text" placeholder="E-mail" name="e-mail" class="email" /> 
							<input type="submit" value="Subscribe" class="subscribe" />
							<div class="clear"></div>
						</form>
					</div>
					
					<!-- Messages for the Subscribe Form -->
					<div class="messages">
					
						<div class="success_message">
							<span class="up">Thank you for your registration.</span>
							<span class="down">You are now subscribed!</span>
						</div>
						
						<div class="error_message">
							<span class="up"><strong>Some errors happened!</strong></span>
							<span class="down">You are already subscribed.</span>
						</div>
						
					</div>
					<!-- End of: Messages for the Subscribe Form -->
					
				</div>
				
				<div class="second_column">
				
					<div class="column_content">
						<h1>Testimonials</h1>
						
						<ul class="testimonals">
							<li data-name="Art Ramadani" data-url="http://artramadani.com/1">Pipilia theme is just amazing, I was searching for a landing page for one of my clients, and then I found Pipilia. Try it.</li>
							<li data-name="Arlind Nushi" data-url="http://artramadani.com/2">Hey, this theme has great features, it fits perfectly for my mobile app!</li>
							<li data-name="Filan Fisteku" data-url="http://artramadani.com/3">Well, I must say Themeforest rocks!</li>
							<li data-name="John Smith" data-url="http://artramadani.com/4">Great one, I was looking around for a landing page that would be perfect for my app, this one just looks great.</li>
						</ul>
					</div>
					
					<div class="bottom_content">
					
						<div class="bubble"></div>
						<div class="name">
							<h3 id="tm_name">&nbsp;</h3>
							<span id="tm_web" class="website">&nbsp;</span>
						</div>
						
					</div>
					
				</div>
				<div class="clear"></div>
				
				<ul class="clients">
                    <li><a href="#"><img src="images/clouds.png" width="122" height="34"></a></li>
                    <li><a href="#"><img src="images/thelaw.png" width="113" height="39"></a></li>
                    <li><a href="#"><img src="images/cakeapp.png" width="131" height="40"></a></li>
                    <li><a href="#"><img src="images/thephish.png" width="94" height="43"></a></li>
				</ul>
				
				<footer>
				
					Copyright © All Rights Reserved 2012. Pipilia App.  
					<div class="right_icons">
						<a class="facebook" href="#">Facebook</a>
						<a class="twitter" href="#">Twitter</a>
						<a class="dribbble" href="#">Dribbble</a>
					</div>
					
					<div class="clear"></div>
					
				</footer>
				
			</div>
			<!-- END OF: Wrapper -->
		</div>
	</div>
</body>
</html>